import Vue from 'vue'; import { Sticky } from 'vant'; Vue.use(Sticky);
<template>
  <!-- 书写html结构 -->
  <div>
    <div
      style="
        text-align: left;
        height: 45px;
        width: 100%;
        background-color: #47bff7;
        padding: 5px;
      ">
      <!-- 跳转回商品商城页面 -->
      <div @click="goStore" style="float: left">
        &nbsp;&nbsp;<van-icon
          name="arrow-left"
          style="float: left; margin-top: 15px" />
      </div>
      <!-- 搜索框 -->
      <div style="float: left; margin-top: 12px">
        <van-search
          v-model="product.commodityName"
          shape="round"
          background="#47bff7"
          placeholder="请输入商品名称"
          style="width: 220px; height: 10px"
          @search="onSearch"
          @clear="onClear" />
      </div>
    </div>
    <div style="margin-top: 20px; height: 100px">
      <div style="margin-right: 285px; margin-bottom: 20px">
        <van-image
          radius="10px"
          width="80px"
          height="80px"
          :src="storeimage" />
      </div>
      <span style="display: block; margin: -95px; margin-right: -35px">
        <span v-if="storeA.storeName !=null">{{ storeA.storeName }}</span>
        <span v-if="storeA.storeName ==null">{{ storeA.stName }}</span>
      </span>
      <span style="display: block; margin-top: 110px; margin-right: 50px">
        <van-rate
          v-model="evaluate"
          :size="20"
          color="orange"
          void-icon="star"
          void-color="#eee"
          readonly />
      </span>
      <span style="display: block; margin-top: -50px; margin-right: -250px">
        <van-button round type="info">
          <van-icon name="service-o" />
          &nbsp; 客服
        </van-button>
      </span>
    </div>
    <div style="margin-top: 20px">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img
            v-lazy="image"
            :src="image"
            style="height: 300px; width: 100%; border-radius: 7px" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--  activeTab 不根据索引匹配，根据名称匹配-->
    <van-tabs
      v-model="activeTab"
      color="#1989FA"
      title-active-color="#1989FA"
      @change="handleTabChange">
      <!-- 标签页 -->
      <van-tab title="综合" name="a">
        <!-- <div
          v-for="index in 2"
          :key="index"
        > -->
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            v-for="product in products"
            :key="product"
            @click="goCommodity(product)">
            <van-image :src="product.imageurl" />
            <div
              style="
                text-align: left;
                width: 100%;
                margin: 8px;
                height: 40px;
              ">
              {{ product.commodityName }}
            </div>
            <div
            v-if="product.integral!=''"
              style="
                font-size: 26px;
                color: red;
                text-align: left;
                width: 100%;
                margin: 8px;
              ">
              {{ product.integral
              }}<span
                style="
                  font-size: 22px;
                  color: red;
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                "
                >积分</span
              >
            </div>
            
            <div
            v-if="product.integral==''"
              style="
                font-size: 26px;
                color: red;
                text-align: left;
                width: 100%;
                margin: 8px;
              ">
              {{ product.coupon
              }}<span
                style="
                  font-size: 22px;
                  color: red;
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                "
                >元</span
              >
            </div>


            <div style="margin: 8px; width: 100%">
              <span
                style="
                  font-size: 14px;
                  color: gray;
                  text-decoration: line-through;
                  display: block;
                  float: left;
                "
                >￥{{ product.price }}</span
              >
              <span style="display: block; float: right"
                >月销{{ product.prompt }}</span
              >
            </div>

            <div
              style="
                text-align: left;
                width: 100%;
                margin: 8px;
                height: 30px;
              ">
              {{ storeA.storeName }}&nbsp;&nbsp;<van-icon name="arrow" />
            </div>
          </van-grid-item>
        </van-grid>
        <!-- </div> -->
      </van-tab>
      <van-tab title="销量" name="b"  >
        <van-grid :border="false" :column-num="2">
           <template #title>
          <div class="tab-title">
            <span>销量</span>
             <van-icon
              class="tab-icon"
               @click="handleTabChangeB"/>
          </div>
        </template>
        </van-grid>
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            v-for="product in products"
            :key="product"
            @click="goCommodity(product)">
            <van-image :src="product.imageurl" />
            <div
              style="
                text-align: left;
                width: 100%;
                margin: 8px;
                height: 40px;
              ">
              {{ product.commodityName }}
            </div>
            <div
              style="
                font-size: 26px;
                color: red;
                text-align: left;
                width: 100%;
                margin: 8px;
              ">
              {{ product.integral
              }}<span
                style="
                  font-size: 22px;
                  color: red;
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                "
                >积分</span
              >
            </div>
            <div style="margin: 8px; width: 100%">
              <span
                style="
                  font-size: 14px;
                  color: gray;
                  text-decoration: line-through;
                  display: block;
                  float: left;
                "
                >￥{{ product.price }}</span
              >
              <span style="display: block; float: right"
                >月销{{ product.prompt }}</span
              >
            </div>

            <div
              style="
                text-align: left;
                width: 100%;
                margin: 8px;
                height: 30px;
              ">
              {{ storeA.storeName }}&nbsp;&nbsp;<van-icon name="arrow" />
            </div>
          </van-grid-item>
        </van-grid>
        <!-- </div> -->
      </van-tab>
      <van-tab title="价格" name="c" @change="handleTabChange">
        <template #title>
          <div class="tab-title">
            <span>价格</span>
            <van-icon
              class="tab-icon"
              :name="sortDirection ? 'arrow-up' : 'arrow-down'"
              @click="handleIconClick" />
          </div>
        </template>
        <div class="tab-content">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="product in products"
              :key="product"
              @click="goCommodity(product)">
              <van-image :src="product.imageurl" />
              <div
                style="
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                  height: 40px;
                ">
                {{ product.commodityName }}
              </div>
              <div
                style="
                  font-size: 26px;
                  color: red;
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                ">
                {{ product.integral
                }}<span
                  style="
                    font-size: 22px;
                    color: red;
                    text-align: left;
                    width: 100%;
                    margin: 8px;
                  "
                  >积分</span
                >
              </div>
              <div style="margin: 8px; width: 100%">
                <span
                  style="
                    font-size: 14px;
                    color: gray;
                    text-decoration: line-through;
                    display: block;
                    float: left;
                  "
                  >￥{{ product.price }}</span
                >
                <span style="display: block; float: right"
                  >月销{{ product.prompt }}</span
                >
              </div>

              <div
                style="
                  text-align: left;
                  width: 100%;
                  margin: 8px;
                  height: 30px;
                ">
                {{ storeA.storeName }}&nbsp;&nbsp;<van-icon name="arrow" />
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
// 引入轮播图
import { Lazyload } from "vant";
// 引入list列表
import { List } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      activeTab: "",
      images: [
        require("../../../src/assets/img/productCarouselImage/门店轮播图片1.png"),
        require("../../../src/assets/img/productCarouselImage/门店图片轮播2png.png"),
        require("../../../src/assets/img/productCarouselImage/门店图片轮播3.png"),
        require("../../../src/assets/img/productCarouselImage/门店轮播图片4.png"),
        // "https://img01.yzcdn.cn/vant/cat.jpeg",
        // "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      product: {}, //存放从商品页面拿到的门店信息
      products: {},
      storeimage: "", //给门店图片赋值
      sortDirection: true, // 默认升序
      evaluate: {}, //门店评价星级
      storeA: {},
    };
  },
  created() {
    //生命周期  创建后要做的事情  vue被创建时候执行的
    this.queryByStoreId();
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //  方法事件处理
    //跳转商城页面
    goStore() {
      //  go(-1):返回上一级路由
      this.$router.go(-1);
    },
    //跳转商品页面
    goCommodity(product) {
      // alert(JSON.stringify(product))
      //  路径/store对应router目录下index.js中定义的path属性值
      this.$router.push({
        path: "/singleCommodity",
        query: {
          data: JSON.stringify(product),
        },
      });
    },
    //根据门店id查询该门店包含商品
    queryByStoreId() {
      //拿到上个页面传过来的参数
      const dataParam = this.$route.query.data;
      //将数据解析为对象或者数据
      if (dataParam) {
        const store = JSON.parse(dataParam);
        // alert("拿到了吗" + JSON.stringify(store));
        var _this = this;
        this.$http
          .post("/tbCommodity/frontMultiTableJointCheck", {
            "storeIdA": store.storeId,
          })
          .then(function (response) {
            console.log(JSON.stringify(response.data));
            // alert(JSON.stringify(response.data.data));
            _this.products = response.data.data;
            // alert(JSON.stringify(_this.products));
            _this.storeA = store;
            // alert(JSON.stringify(_this.store) + "执行了嘛");
            //给门店封面赋值
            _this.storeimage = store.storeimage;
            // alert(_this.storeimage + "执行了嘛=======");
            //执行查询门店星级
            _this.evaluate = response.data.data[0].country; //查询出来的店铺评分
            
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    //点击标签时，拿到商品类型id查询到该类型的商品
    handleTabChange(name) {
      // alert("执行了么" + name + "====");
      // alert("执行了么" + JSON.stringify(this.product));
      //如果标签为综合查询，就根据当前门店查所有
      if (name == "a" ||name=="b") {
        //清空顺序标识
        this.product.priceOrder = "";
        this.frontMultiTableJointCheck(this.product);
      } else if (name == "c") {
        //判断this.product.priceOrder的值
        if (this.product.priceOrder == "") {
          //改为降序 避免点击完其他tab后，没有点到图标，而是点到tab查询的
          this.sortDirection = true;
        }
        //标签为价格标签，默认按升序
        //判断priceOrder是1还是0  1 是倒序 0是正序
        this.frontMultiTableJointCheck(this.product);
      }
    },
    //点击标签时，拿到商品类型id查询到该类型的商品
    handleTabChangeB() {
       for (var i = 1; i < this.products.length; i++) {
        for (var j = 0; j < this.products.length - i; j++) {
          if (
            Number(this.products[j].prompt) <
            Number(this.products[j + 1].prompt)
          ) {
            let aaa = this.products[j];
            this.products[j] = this.products[j + 1];
            this.products[j + 1] = aaa;
          }
        }
      }
    },
    //多表查询
    frontMultiTableJointCheck(e) {
      // alert("执行了么0999" + JSON.stringify(e) + "==----==");
      var _this = this;
      this.$http
        .post("/tbCommodity/frontMultiTableJointCheck", {
          "storeIdA": this.storeA.storeId,
          "priceOrder":e
        })
        .then(function (response) {
          console.log(JSON.stringify(response));
          // alert(JSON.stringify(response.data));
          _this.products = response.data.data;
          // alert(JSON.stringify(_this.products));
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //点击价格图标事件
    handleIconClick() {
      //  alert("会执行嘛")
      if (this.sortDirection) {
        //改为降序
        this.sortDirection = false;
        //改变顺序
        this.product.priceOrder = 1;
        this.frontMultiTableJointCheck(1);
      } else {
        //改为降序
        this.sortDirection = true;
        //改变顺序
        this.product.priceOrder = 0;
        this.frontMultiTableJointCheck(0);
      }
    },
    //搜索框查询时间 当点击回车 或者在手机键盘中点击搜索触发
    onSearch(val) {
      // alert("执行了嘛" + val);
      // alert(JSON.stringify(this.product));
      this.frontMultiTableJointCheck(this.product);
    },
    //当点输入框自带的小叉时时自动查询该门店中的所有商品
    onClear() {
      // 执行查询所有的操作
      // alert(JSON.stringify(this.product));
      //调用查询方法
      this.frontMultiTableJointCheck(this.product);
    },
  },

  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
.sort-icon {
  font-size: 12px;
  margin-left: 4px;
}
</style>
